﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>jQuery Modal</title>
    @*<style type="text/css">
        .ui-dialog { position: relative; padding: .2em; width: 300px; }
        .ui-resizable { position: relative;}
    </style>*@
    <script src="/Scripts/jquery-1.7.2.min.js" language="javascript" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.11.min.js" language="javascript" type="text/javascript"></script>
    @*<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />*@
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" />
    @*<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />*@

    <script language="javascript" type="text/javascript">
        //.html('This dialog will show every time!')
        $(document).ready(function () {
            var $dialog = $('#divModalDialog')		        
		        .dialog({
		            autoOpen: false,
		            title: 'Basic Dialog'
		        });

            $('#opener').click(function () {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        });
    </script>    
</head>
<body>
    <div>
        <input type="button" id="opener" value="Click to Open Dialog" />
    </div>

    <div id="divModalDialog">
        This Is a fundamental form
        <table cellpadding="3" cellspacing="0" style="width:100%;">
            <tr>
                <td>Row 1</td>
                <td>Row 1</td>
            </tr>
            <tr>
                <td>Row 2</td>
                <td>Row 2</td>
            </tr>
            <tr>
                <td>Row 3</td>
                <td>Row 3</td>
            </tr>
        </table>
    </div>
</body>
</html>
